<template>
  <!-- 画布 start -->
  <view class="content">
    <view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
      <canvas
        class="cropper"
        :disable-scroll="true"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        :style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
        canvas-id="cropper"
      ></canvas>
      <canvas
        class="cropper"
        :disable-scroll="true"
        :style="{
          position: 'fixed',
          top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
          left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
          width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
          height: `${cropperOpt.height * cropperOpt.pixelRatio}`
        }"
        canvas-id="targetId"
      ></canvas>
    </view>
    <!-- 画布 end -->
    <!-- 按钮 start -->
    <view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
      <!-- #ifdef H5 -->
      <!-- <view class="upload" @tap="uploadTap">{{i18n['选择图片']}}</view> -->
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <!-- <view class="upload" @tap="uploadTap">{{i18n['重新选择']}}</view> -->
      <!-- #endif -->
      <view class="upload" @tap="uploadTap">{{i18n['重新选择']}}</view>
      <view class="getCropperImage" @tap="getCropperImage(false)">{{i18n['完成']}}</view>
    </view>
    <!-- 按钮 end -->
    <!-- 断网检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网检测 end -->
  </view>
</template>

<script>
// 引入裁剪js
import WeCropper from './libs/weCropper.js';
export default {
  props: {
    // 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
    // mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
    boundStyle: {
      type: Object,
      default() {
        return {
          lineWidth: 4,
          borderColor: 'rgb(245, 245, 245)',
          mask: 'rgba(0, 0, 0, 0.35)'
        };
      }
    }
  },
  data() {
    return {
      // 底部导航的高度
      bottomNavHeight: 50,
      // originWidth: 200,
      // originHeight: 200,
      width: 0, //屏幕宽度
      height: 0, //屏幕高度
      cropperOpt: {
        id: 'cropper', //画布id
        targetId: 'targetCropper', //画布事件源id
        pixelRatio: 1, //设备像素密度
        width: 0, //屏幕宽度
        height: 0, //屏幕高度
        scale: 2.5, //图片缩放倍数
        zoom: 8, //缩放系数
        cut: {
          x: (this.width - this.rectWidth) / 2, //裁剪框宽度x坐标
          y: (this.height - this.rectHeight) / 2, //裁剪框宽度y坐标
          width: this.rectWidth, //裁剪框宽度
          height: this.rectHeight //裁剪框高度
        },
        // 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
        // mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
        boundStyle: {
          lineWidth: uni.upx2px(this.boundStyle.lineWidth), //宽度
          mask: this.boundStyle.mask, //遮罩层颜色
          color: this.boundStyle.borderColor //边框颜色
        }
      },
      // 裁剪框和输出图片的尺寸，高度默认等于宽度
      // 输出图片宽度，单位px
      destWidth: this.rectWidth, //输出图片宽度
      destHeight: this.rectHeight, //输出图片高度
      // 裁剪框宽度，单位px
      rectWidth: 200, //裁剪框宽度
      rectHeight: 200, //裁剪框高度
      // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
      fileType: 'jpg',
      cropper: null //声明裁剪对象
    };
  },
  /**
   * @description 图片裁剪接收参数
   * @param {Object} option
   * @param {String} option.fileType 图片格式
   * @param {String} option.myImgUrl 图片本地路径
   * @param {String} option.rectHeight 图片裁剪框高度
   * @param {String} option.rectWidth 图片裁剪框宽度
   */
  onLoad(option) {
    console.log('图片裁剪接受的参数==>', option);
    // 获取手机宽高等信息
    let rectInfo = uni.getSystemInfoSync();
    this.width = rectInfo.windowWidth; //手机宽度
    this.height = rectInfo.windowHeight - this.bottomNavHeight; //手机高度
    console.log('width: '+this.width,'height: '+this.height)
    this.cropperOpt.width = this.width; //手机宽度
    this.cropperOpt.height = this.height; //手机高度
    this.cropperOpt.pixelRatio = rectInfo.pixelRatio; //设备像素密度赋值
    // 接收参数赋值
    if (option.rectWidth && option.rectHeight) {
      // 宽高参数如果超过了手机屏幕宽度,需要限制,否则生成的图片白屏
      // 如果是宽度比高度大的图片 以最大宽度为准
      // 如果是高度比宽度大的图片 以最大高度为准
      let _scale = option.rectWidth / option.rectHeight;
      let _width = Number(option.rectWidth);
      let _height = Number(option.rectHeight);
      if(_scale >= 1){
        // 宽度为准
        if(Number(option.rectWidth) >= this.width){
          _width = this.width;
          _height = option.rectHeight * _scale;
        }
      }else{
        // 高度为准
        if(Number(option.rectHeight) >= this.height){
          _height = this.height;
          _width = this.width * _scale;
        }
      }
      let rectWidth = _width; //图片裁剪框宽度
      let rectHeight = _height; //图片裁剪框高度
      this.rectWidth = rectWidth;
      this.rectHeight = rectHeight;
      this.destWidth = rectWidth; //输出图片宽度
      this.destHeight = rectHeight; //输出图片高度
      console.log(`裁剪宽高==>${this.rectWidth},${this.rectHeight}，输出宽高==>${this.destWidth},${this.destHeight}`);
      this.cropperOpt.cut = {
        x: (this.width - rectWidth) / 2, //裁剪框宽度x坐标
        y: (this.height - rectHeight) / 2, //裁剪框宽度y坐标
        width: rectWidth, //图片裁剪框宽度
        height: rectHeight //图片裁剪框高度
      };
    }
    console.log('手机宽度',this.width)
    console.log('手机高度',this.height)
    console.log('设备像素密度赋值',this.cropperOpt.pixelRatio)
    // 图片格式赋值
    if (option.fileType) this.fileType = option.fileType;
    // 初始化
    this.cropper = new WeCropper(this.cropperOpt)
      .on('ready', ctx => {
        // wecropper is ready for work!
      })
      .on('beforeImageLoad', ctx => {
        // before picture loaded, i can do something
      })
      .on('imageLoad', ctx => {
        // picture loaded
      })
      .on('beforeDraw', (ctx, instance) => {
        // before canvas draw,i can do something
      });
    // 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000'
    });
    setTimeout(() => {
      this.cropper.pushOrign(option.myImgUrl);
    }, 200);
  },
  methods: {
    /**
     * @description 手指触摸开始事件
     * @param {Object} e 事件对象
     */
    touchStart(e) {
      this.cropper.touchStart(e);
    },
    /**
     * @description 手指触摸移动事件
     * @param {Object} e 事件对象
     */
    touchMove(e) {
      this.cropper.touchMove(e);
    },
    /**
     * @description 手指触摸开结束事件
     * @param {Object} e 事件对象
     */
    touchEnd(e) {
      this.cropper.touchEnd(e);
    },
    /**
     * @description 裁剪完成完成事件
     */
    getCropperImage() {
      let cropper_opt = {
        destHeight: Number(this.destHeight), // uni.canvasToTempFilePath要求这些参数为数值  输出图片高度
        destWidth: Number(this.destWidth), // 输出图片宽度
        fileType: this.fileType //输出图片类型
      };
      // canvas生成图片
      this.cropper.getCropperImage(cropper_opt, (path, err) => {
        console.log('export image path',path);
        console.log('export image err',err);
        // 生成图片错误提示
        if (err) {
          uni.showModal({
            title: this.i18n['温馨提示'],
            content: err.message
          });
        } else {
          // 裁剪完成推送裁剪后的path并返回上一页
          uni.$emit('uPicCropper', path);
          uni.navigateBack({
            delta: 1
          });
        }
      });
    },
    /**
     * @description 重新选择图片
     */
    uploadTap() {
      let self = this;
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success(res) {
          // 获取选择图片之后的图片本地路径
          let src = res.tempFilePaths[0];
          //  获取裁剪图片资源后，给data添加src属性及其值
          self.cropper.pushOrign(src);
        }
      });
    }
  }
};
</script>

<style scoped>
/* nvue不能用标签命名样式 */
/* #ifndef APP-NVUE */
image {
  display: inline-block;
  /* 解决图片加载时可能会瞬间变形的问题 */
  will-change: transform;
}

/* 在weex，也即nvue中，所有元素默认为border-box */
view,
text {
  box-sizing: border-box;
}
/* #endif */
/* 裁剪样式 start */
.content {
  background-color: #000000;
  height: 100vh;
  /* background: rgba(255, 255, 255, 1); */
}

.cropper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999999999;
}

.cropper-buttons {
  background-color: #000000;
  color: #eee;
}

.cropper-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #000;
}

.cropper-buttons {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
   margin-bottom: 0rpx;
    margin-bottom: calc(0rpx + constant(safe-area-inset-bottom));
    margin-bottom: calc(0rpx + env(safe-area-inset-bottom));
    left: 0;
    font-size: 28rpx;
    z-index: 9999999999;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
  width: 50%;
  text-align: center;
}

.cropper-buttons .upload {
  text-align: left;
  padding-left: 50rpx;
  width: 180rpx;
}

.cropper-buttons .getCropperImage {
  text-align: right;
  padding-right: 50rpx;
    width: 160rpx;
}
/* 裁剪样式 end */
</style>
